{% extends 'base.html' %}

{% block title %}Diagnostic quiz — {{ course.title }}{% endblock %}

{% block content %}
<section class="py-4">
  <div class="container" style="max-width:40rem;">
    <h1 class="h4 fw-bold mb-1">Free diagnostic</h1>
    <p class="text-muted small mb-4">{{ course.title }} · {{ questions|length }} questions · one answer each</p>

    <form method="post">
      {% csrf_token %}
      {% for q in questions %}
      <div class="card border-0 shadow-sm rounded-4 p-3 mb-3">
        <div class="fw-semibold mb-2">{{ forloop.counter }}. {{ q.question_text }}</div>
        {% for letter, text in q.options_map.items %}
        <div class="form-check mb-1">
          <input class="form-check-input" type="radio" name="q_{{ q.pk }}" id="q{{ q.pk }}_{{ letter }}" value="{{ letter }}" required>
          <label class="form-check-label" for="q{{ q.pk }}_{{ letter }}"><strong>{{ letter }}.</strong> {{ text }}</label>
        </div>
        {% endfor %}
      </div>
      {% endfor %}
      <button type="submit" class="btn btn-primary btn-lg w-100 fw-semibold">Continue</button>
      <p class="small text-muted text-center mt-2 mb-0">Next: enter email / WhatsApp to see your projected score.</p>
    </form>
  </div>
</section>
{% endblock %}